<template>
	<div class="page">
		<mt-header title="装车报备">
			<router-link :to="{name: 'winbid-list'}" slot="left">
				<img class="back" :src="staticImgData.back" alt="">
			</router-link>
		</mt-header>
		<div class="box-con">
			<div class="list-type">{{detailDesti ? detailDesti.inquirySheetNo : ''}}</div>
			<div class="list-address">
				<p>{{detailDesti ? detailDesti.originLocationCity : ''}}</p>
				<div class="img">
					<img class="car" :src="staticImgData.car" alt="">
					<img class="line" :src="staticImgData.line" alt="">
				</div>
				<p>{{detailDesti ? detailDesti.destLocationCity : ''}}</p>
			</div>
			<div class="list-con gap-bottom detail-qua">
				<div class="list-detail">
					<div class="list-text gap-numder detail-time">
						<p>商品车数量：</p>
						<div class="list-jump" @click="carList">{{detailDesti ? detailDesti.totalShipCount : ''}}(台)<img class="img-detail" :src="staticImgData.detail" alt=""></div>
					</div>
					<div class="list-text detail-time">
						<p>竞价时间：</p>
						<p>{{detailDesti ? detailDesti.competitionTime : ''}}</p>
					</div>
				</div>
			</div>
			<div class="list-con gap-bottom">
				<div class="list-detail">
					<p class="detail-remark"><span>备注：</span>{{detailDesti ? detailDesti.remarks : ''}}</p>
				</div>
			</div>
			<div v-show="reportList==''" class="list-con">
				<div class="list-mark">
					<p class="list-num">装车报备</p>
				</div>
				<div class="popH">
					<div class="h50 hNumber">
						<group>
							<popup-picker
							title="车牌号"
							:data="carNumberList"
							v-model="defaultCar"
							:columns="1"
							@on-show="onShow"
							@on-change="onChange">
							</popup-picker>
						</group>
					</div>
					<div class="list-text h50 driver">
						  <group >
								<x-input title="司机" placeholder="请填写司机姓名" v-model="driveName"></x-input>
						  </group>
					</div>
					<div class="list-text h50 contact">
						<group >
							<x-input type="tel" :max="11" title="联系方式" placeholder="请填写联系方式" v-model="driveMobile"></x-input>
						</group>
					</div>
					<group class="h50 hTime">
						<datetime-range
						title="到场时间"
						:format="formatDate"
						:start-date="startDate" 
						:end-date="endDate" 
						v-model="todyDate" 
						>
						</datetime-range>
					</group>
				</div>
			</div>
			<div v-show="reportList" class="list-con">
				<div class="list-mark">
					<p class="list-num">装车报备</p>
				</div>
				<div class="list-detail">
					<div class="list-text gap-numder">
						<p>司机：</p>
						<p>{{reportList ? reportList.driverName : ''}}</p>
					</div>
					<div class="list-text gap-numder">
						<p>车牌号：</p>
						<p>{{reportList ? reportList.plateNo : ''}}</p>
					</div>
					<div class="list-text gap-numder">
						<p>司机电话：</p>
						<p>{{reportList ? reportList.driverPhone : ''}}</p>
					</div>
					<div class="list-text">
						<p>到场时间：</p>
						<p>{{arrivalTime}}</p>
					</div>
				</div>
			</div>
			<x-button v-show="reportList==''" type="primary"
			class="custom-primary"
			:disabled="isDisable"
			action-type="button"
			@click.native="winbidPlan"
			text="确认提交"></x-button>
		</div>
		
		<v-loading v-show="loadingShow"></v-loading>
	</div>
</template>

<script>
	import { Header, Toast } from 'mint-ui'
	import { XInput, XButton, PopupPicker, Group, DatetimeRange } from 'vux'
	import Loading from '@/components/common/loading/loading'
	import * as filters from '@/filter'
	import * as BidApi from '@/api/bid'
	import * as ThreeStorage from '@/utils/store/token.js'
	export default {
	  name: 'winbid-report',
	  data() {
	    return {
	      loadingShow: false,
	      staticImgData: {
	        bg: require('@/assets/image/v1/bid/bg@2x.png'),
	        back: require('@/assets/image/v1/bid/back@2x.png'),
	        car: require('@/assets/image/v1/bid/car@2x.png'),
	        line: require('@/assets/image/v1/bid/line@2x.png'),
	        detail: require('@/assets/image/v1/bid/detail@2x.png')
	      },
	      value: '',
	      isDisable: false,
	      carNumberList: [],
	      defaultCar: ['请选择'],
	      formatDate: 'YYYY-MM-DD',
	      startDate: filters.startDate(),
	      endDate: filters.endDate(150),
	      todyDate: filters.todyDate(),
	      detailDesti: '', // 始发地、目的地等信息
	      fleetList: '', // 车牌号信息
	      reportList: '', // 提交报备返回的信息
	      driveName: '', // 司机姓名
	      driveMobile: '', // 司机联系方式
	      driveCode: '', // 司机code
	      planShipDate: '', // 计划起运时间
	      arrivalTime: ''// 预期到场时间
	    }
	  },
	  components: {
	    Header,
	    XInput,
	    XButton,
	    PopupPicker,
	    Group,
	    DatetimeRange,
	    'v-loading': Loading
	  },
	  created() {
	    // Get the origin information
	    this.getDetailDesti()
	  },
	  activated() {
	    /* use keep-alive,so when re-enter,
			call getDetailDesti in activated*/
	    this.getDetailDesti()
	  },
	  methods: {
	    getDetailDesti() {
	      // use keep-alive,sessionStorage data needs to be obtained from activated
	      const detailDestiParam = {
	        condition: {
	          queryFlag: '',
	          bidPartyCode: ThreeStorage.getCarInfo().currentFleetId, // 车队id
	          id: ThreeStorage.getDealListInfo().id// 询价单ID
	        }
	      }
	      this.loadingShow = true
	      BidApi.getDealList(detailDestiParam).then(res => {
	        this.loadingShow = false
	        if (res.code === 0) {
	          this.detailDesti = res.data.records[0]
	          // 模板消息进入从这获取计划起运时间
	          this.planShipDate = res.data.records[0].planShipDate
	        } else {
	          Toast({
	            message: res.message,
	            duration: 1500
	          })
	          this.loadingShow = false
	        }
	      }).catch(res => {
	        this.loadingShow = false
	        Toast({
	          message: res.message || '系统繁忙，请稍候再试',
	          duration: 1500
	        })
	      })
	    },
	    carList() {
	      this.$router.push({ name: 'bid-carList' })
	    },
	    onShow() {
	      // use keep-alive,sessionStorage data needs to be obtained from activated
	      const fleetParam = {
	        current: 1,
	        size: 99,
	        condition: {
	          fleetId: ThreeStorage.getCarInfo().currentFleetId// 车队id，获取车队信息
	        }
	      }
	      BidApi.getfleetInfo(fleetParam).then(res => {
	        console.log(res)
	        if (res.code === 0) {
	          this.fleetList = res.data.records
	          for (let i = 0; i < this.fleetList.length; i++) {
	            this.carNumberList.push(this.fleetList[i].carrierPlate)
	          }
	        } else {
	          Toast({
	            message: res.message,
	            duration: 1500
	          })
	        }
	      }).catch(res => {
	        Toast({
	          message: res.message || '系统繁忙，请稍候再试',
	          duration: 1500
	        })
	      })
	    },
	    onChange(value) {
	      for (let i = 0; i < this.fleetList.length; i++) {
	        if (this.fleetList[i].carrierPlate === value[0]) {
	          this.driveName = this.fleetList[i].driverName
	          this.driveMobile = this.fleetList[i].driverMobile
	          this.driveCode = this.fleetList[i].driverId
	        }
	      }
	    },
	    winbidPlan() {
	      const time = this.todyDate[0] + ' ' + this.todyDate[1] + ':' + this.todyDate[2]
	      // 计划起运时间戳
	      const timesStamp = filters.formatTime(time)
	      const nowTime = new Date().getTime()
	      if (this.defaultCar[0] === '请选择') {
	        Toast({
	          message: '请选择车牌号',
	          duration: 1500
	        })
	        return
	      } else if (this.driveName === '') {
	        Toast({
	          message: '请填写司机姓名',
	          duration: 1500
	        })
	        return
	      } else if (this.driveMobile === '') {
	        Toast({
	          message: '请填写联系方式',
	          duration: 1500
	        })
	        return
	      } else if (timesStamp < this.planShipDate) {
	        Toast({
	          message: '到场时间不能晚于计划起运时间',
	          duration: 1500
	        })
	        return
	      } else if (timesStamp < nowTime) {
	        Toast({
	          message: '到场时间不能晚于当前时间',
	          duration: 1500
	        })
	        return
	      } else {
	        const reportListParam = {
	          inquirySheetId: ThreeStorage.getDealListInfo().id, // 询价单id
	          driverCode: this.driveCode, // 司机code
	          driverName: this.driveName, // 司机姓名
	          driverPhone: this.driveMobile, // 司机电话
	          plateNo: this.defaultCar[0], // 车牌号
	          expectArrivalTime: timesStamp// 到场时间
	        }
	        this.loadingShow = true
	        this.isDisable = true
	        BidApi.getReportList(reportListParam).then(res => {
	          console.log(res)
	          this.loadingShow = false
	          this.isDisable = false
	          if (res.code === 0) {
	            this.reportList = res.data
	            this.arrivalTime = filters.stampToTime(res.data.expectArrivalTime)
	          } else {
	            Toast({
	              message: res.message,
	              duration: 1500
	            })
	            this.loadingShow = false
	          }
	        }).catch(res => {
	          this.loadingShow = false
	          this.isDisable = false
	          Toast({
	            message: res.message || '系统繁忙，请稍候再试',
	            duration: 1500
	          })
	        })
	      }
	    }
	  }
	}
</script>

<style scoped>
	@import '../../styles/util.css';
	/* common */
	.page {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.box-con{
		width: 100%;
		height: 100%;
		background: url(../../assets/image/v1/bid/bg@2x.png) center center no-repeat;
		margin-top: 46px;
	}
	.list-type{
		font-size: 0.17rem;
		text-align: left;
		padding: 0.16rem 0 0 0.16rem;
		color: #fff;
	}
	.list-address{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0.24rem 0 0.21rem 0;
		font-size: 0.19rem;
		font-weight: bold;
		color: #fff;
	}
	.list-address img{
		width: .2rem;
		height: .3rem;
	}
	.list-con.detail-qua{
		background: #3c91fe;
	}
	.list-mark{
		text-align: left;
		border-bottom: 1px solid #eaf0f5;
	}
	.list-num{
		font-size: 0.16rem;
		color: #000000;
		font-weight: bold;
		padding: 0.16rem 0 0.16rem 0.16rem;
	}
	.list-detail{
		padding: 0.16rem;
	}
	.h50{
		height: 0.5rem;
		padding: 0 0.16rem;
		line-height: 0.5rem;
		border-bottom: 1px solid #eaf0f5;
	}
	.list-detail .detail-remark{
		text-align: left;
		color: #f9524a;
		font-size: 0.15rem;
		font-weight: bold;
	}
	.list-detail .detail-remark span{
		font-size: 0.16rem;
	}
	.list-text.detail-time{
		color: #d5e2ff;
	}
	.list-text{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 0.14rem;
		color: #3f3f3f;
	}
	.list-jump{
		display: flex;
		align-items: center;
	}
	.img-detail{
		width: .17rem;
		height: .17rem;
		padding-left: 0.15rem;
	}
	.gap-numder{
		padding-bottom: 0.12rem;
	}
	.custom-primary{
		width: 90%;
		color: #fff;
		margin:0.35rem 5% 0.35rem 5%;
	}
	.list-text >>>.weui-label{
		text-align: left;
	}
	.driver >>>.weui-input{
		padding-left: 0.5rem;
		color: #000 !important;
	}
	.contact>>>.weui-input{
		padding-left: 0.17rem;
		color: #000 !important;
	}
	.list-text>>>.weui-icon-clear{
		font-size: 0.2rem !important;
	}
	.hNumber>>>.vux-popup-picker-select{
		text-align: left !important;
		padding-left: 0.5rem;
	}
	.hTime>>>.vux-popup-picker-select{
		text-align: left !important;
		padding-left: 0.32rem;
	}
	.h50>>>.vux-cell-value{
		color:#000;
	}
	.popH>>>.weui-cell{
		padding: 0 !important;
	}
</style>
